<template>
	<div>
		<u-popup bgColor='#F6F7F9' class="favorites-popup" round='42rpx' :show="show" mode="bottom" @close="$emit('close')">
			<view class="favorites-pop padd-top30 padd-left32 padd-right32">
				<view class="flex justify-between mar-bottom31">
					<view class="font_s28 cr-333 font_w500 ">
						选择收藏夹
					</view>
					<view class="font_s24 cr-999" @click="handleShowCollctPopup(true)">
						<image src="https://www.worldintek.com:39011/yaolexue-service/icon_add.png" mode="" class="w-21 h-21 mar-right10"></image>
						新建收藏夹
					</view>
				</view>
				<view class="content ">
					<view class=" mar-bottom19 item" v-for="item in favoritesList">
						<radio-group @change="radioChange">
							<label class="flex justify-between">
								<view>
									<view class="cr-333 font_s26 mar-bottom17">
										{{item.favoritesName}}
									</view>
								<!-- 	<view class="cr-999 font_s24">
										10个内容
									</view> -->
								</view>
								<view>
									<radio style='transform:scale(.6);'  color='#FA312A' :value="`${item.id}`"
										:checked="activeFavorites?activeFavorites.id==item.id:false" />
								</view>
							</label>
						</radio-group>
					</view>
				</view>
				<u-button type="primary" text="确定" @click="handleUpdateContentCollectionStatus"></u-button>
			</view>
		</u-popup>
		<t-collectpop :show='showCeateCollectPopup' 
			@close="()=>{handleShowCollctPopup(false);getUserFavorites(true)}"></t-collectpop>
	</div>
</template>

<script>
	export default {
		props: ['show', 'defaultFavorites', 'faChild', 'list','batch','targetId','targetFavoritesld'],//defaultFavorites 回显当前内容所在得收藏夹 faChild当前所需添加到收藏夹的内容,batch批量操作，targetId用于批量操作的目标用户id，targetFavoritesld用于批量操作的目标用户收藏夹id
		name: "t-favoritespop",
		data() {
			return {
				favoritesList: [],
				activeFavorites: null,
				showCeateCollectPopup: false,
			};
		},
		watch: {
			show(v) {
				if(v)this.init()
			}
		},
		methods: {
			init() {
				this.getUserFavorites()
			},
			//更新收藏夹
			handleUpdateContentCollectionStatus(collectionStatus = 1) {
				// this.handleShowFaPopup(false)
				this.handleShowCollctPopup(false)
        console.log(1111111111111)
				if(this.batch){
					const collectionParams = {
						targetId: this.targetId,
            targetFavoritesId:this.targetFavoritesld
					}
					if (this.activeFavorites) {
						collectionParams.userFavoritesId = this.activeFavorites.id
					}
          //collectionParams参数组成如下
          //targetFavoritesId: 71
          // targetld: 55
          // userFavoritesId: 71
					return this.$http.post(
						`/yaolexue-service-portal/userFavorites/batchCollectionContentItem`, collectionParams, {
							isNeedLoading: true
						}).then(res => {
					
						if (res.code === 200) {
							this.$emit('close',this.activeFavorites)
							// this.init()
						}
					})
				}else{
					const collectionParams = {
						collectionStatus: collectionStatus,
						contentItemId: this.faChild.id,
					
					}
					if (this.activeFavorites) {
						collectionParams.userFavoritesId = this.activeFavorites.id
					}
					return this.$http.put(
						`/yaolexue-service-portal/contentItem/updateContentCollectionStatus`, collectionParams, {
							isNeedLoading: true
						}).then(res => {
					
						if (res.code === 200) {
							this.$emit('close',this.activeFavorites,)
							// this.init()
						}
					})
				}
				
			},
			getUserFavorites(refresh) {
				if (this.list&&!refresh) {
					this.favoritesList = this.list
					this.activeFavorites = this.defaultFavorites || this.favoritesList.find(item => item.defaultStatus) || this
						.favoritesList[
							0]
					return
				}

				return this.$http.get(
					`/yaolexue-service-portal/userFavorites/findUserFavorites`, {}, {
						isNeedLoading: true
					}).then(res => {
					this.favoritesList = res.data
					this.activeFavorites = this.defaultFavorites || res.data.find(item => item.defaultStatus) ||
						res.data[
							0]
				})

			},


			handleShowCollctPopup(flag) {

				this.showCeateCollectPopup = flag;
				this.favoritesName = ''
			},
			//选择收藏夹
			radioChange(evt) {
				this.activeFavorites = this.favoritesList.find(item => item.id + '' === evt.detail.value)
			}
		}
	}
</script>

<style lang="scss"  >
	
	// ::v-deep uni-radio .uni-radio-input {
	// 	width: 32rpx;
	// 	height: 32rpx;
	// }
	
	// ::v-deep .uni-radio-input.uni-radio-input-checked {
	// 	background-color: #FA312A !important;
	// 	border-color: #FA312A !important;
	// }
	/*radio未选中时样式 */
	// radio .wx-radio-input{
	// width: 32rpx;
	// height: 32rpx;
	// // border-radius: 50%;
	// }
	
	
	// /* 选中后的 背景样式 （红色背景 无边框 可根据UI需求自己修改） */
	// radio .wx-radio-input.wx-radio-input-checked {
	// background: #0394F0 !important;
	// border-color:#0394F0 !important;
	// }
	
	// /* 选中后的 对勾样式 （白色对勾 可根据UI需求自己修改） */
	// radio .wx-radio-input.wx-radio-input-checked::before {
	// width: 18rpx;
	// height: 18rpx;
	// line-height: 18rpx;
	// text-align: center;
	// font-size: 22rpx;
	// color: #fff;
	// background: transparent;
	// transform: translate(-50%, -50%) scale(1);
	// -webkit-transform: translate(-50%, -50%) scale(1);
	// }
	
	// .u-popup__content{
	// 	background-color: none !important;
	// }
	//  .u-popup__content {
	// 	border-radius: 42rpx 42rpx 0rpx 0rpx;
	// 	overflow: hidden;
		
	// }
v-deep .u-popup__content{
 	overflow: hidden;
}
	 .favorites-pop {
		height: 454rpx;
		.content {
			padding: 4rpx 18rpx;
			height: calc(100% - 82rpx - 100rpx);
			height: calc(100% - 82rpx - 100rpx);
			overflow-y: auto;
			background: #FFFFFF;
			border-radius: 19rpx;
			margin-bottom: 20rpx;
			.item {
				padding: 29rpx 8rpx 29rpx 11rpx;
				border-bottom: 1rpx solid #E1E1E1;
				;
			}
		}
	}
</style>